import React, { useEffect } from 'react'
import { useNavigate, useParams } from 'react-router-dom';
import { Button, Form, Input, Card, message } from 'antd';
import { addHospitalRequest, getHosSetFormIdRequest, updateHosSetRequest } from '@/api/hospital/hospitalSet';
import type { addHospitalParamsType } from '@/api/hospital/model/hospitalSetTypes';

import style from '../index.module.css'
import { transform } from 'typescript';

export default function AddOrUpdateHosSet() {
  const navigate = useNavigate()
  const [form] = Form.useForm()

  const { id } = useParams()

  //更新页面的逻辑
  useEffect(() => {
    const getHosDetail = async () => {
      if (id) {
        const result = await getHosSetFormIdRequest(id)
        //给当前表单组件添加默认值
        form.setFieldsValue(result)
      }
    }
    getHosDetail()
  }, [])
  //添加与更新医院数据的事件， 添加/更新 医院 完成 处理
  const onFinish = async (fieldValue: addHospitalParamsType) => {
    if (id) {
      //更新的请求
      await updateHosSetRequest({ ...fieldValue, id })
    } else {
      // 提交的请求
      await addHospitalRequest(fieldValue)
    }
    message.success(`${id ? "更新" : "添加"}医院成功`);
    navigate("/syt/hospital/hospitalSet")
  }
  //添加页面的返回按钮事件
  const goBackHandle = () => {
    navigate(-1)
  }

  return (
    <div>
      <Card>
        <Form
          form={form}
          name="basic"
          labelCol={{ span: 3 }}
          wrapperCol={{ span: 18 }}
          onFinish={onFinish}
        >
          <Form.Item label="医院名称" name="hosname"
            rules={[{
              required: true,
              message: '请输入医院名称',
              transform(value){
                return value?value.trim():value
              }
            }]}
          >
            <Input />
          </Form.Item>

          <Form.Item label="医院编号" name="hoscode"
            rules={[{
              required: true,
              message: '请输入医院编号',
              transform(value){
                return value?value.trim():value
              }
            }]}
          >
            <Input />
          </Form.Item>

          <Form.Item label="api基础路径" name="apiUrl"
            rules={[{
              required: true,
              message: '请输入api基础路径',
              transform(value){
                return value?value.trim():value
              }
            }]}
          >
            <Input />
          </Form.Item>

          <Form.Item label="联系人姓名" name="contactsName"
            rules={[{
              required: true,
              message: '请输入联系人姓名',
              transform(value){
                return value?value.trim():value
              }
            }]}
          >
            <Input />
          </Form.Item>

          <Form.Item label="联系人手机" name="contactsPhone"   
          rules={[{
            required: true,
            message: '请输入联系人手机',
            transform(value){
              return value?value.trim():value
            }
          }]}>
            <Input />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 3 }}>
            <Button className={style.mr} type="primary" htmlType="submit">
              提交
            </Button>
            <Button type="default" htmlType="button" onClick={goBackHandle}>
              返回
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}
